<template>
	<div class="list" v-if="message && message.id > 0">
		<div class="title">
			<div class="avatar">
				{{ formatUsername(message.realName) }}
			</div>
			{{ message.realName }}
			<div
				:class="[
					'tip',
					{
						success: message.approveStatus === '02',
						error: message.approveStatus === '03',
					},
				]"
				v-if="['02', '03'].includes(message.approveStatus)"
			>
				{{ message.approveStatus === "02" ? "已同意" : "已驳回" }} · {{ message.approveDate }}
			</div>
		</div>
		<div class="remark" v-if="['02', '03'].includes(message.approveStatus)">
			{{ message.approveOpinion }}
		</div>
	</div>
</template>

<script>
export default {
	name: "user",
	props: {
		message: {
			type: Object,
			default: () => {},
		},
	},
	data() {
		return {}
	},
	computed: {},
	methods: {
		formatUsername: name => (name ? name.slice(0, 2) : ""),
	},
	components: {},
}
</script>

<style lang="scss" scoped>
.list {
	margin-bottom: 15px;
	.title {
		max-width: 1100px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 18px;
	}
	.avatar {
		width: 40px;
		height: 40px;
		overflow: hidden;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		border-radius: 5px;
		color: #fff;
		background: #128bf1;
		font-size: 14px;
		margin-right: 15px;
	}
	.tip {
		color: #666;
		font-weight: 500;
		font-size: 12px;
		letter-spacing: 1px;
		margin-left: auto;
		&.success {
			color: #67c23a;
		}
		&.error {
			color: #f56c6c;
		}
	}
	.remark {
		color: #999;
		font-size: 14px;
		margin-top: 10px;
		padding: 7px 10px;
		border-radius: 3px;
		background: #f5f5f5;
	}
}
</style>
